<template>
  <div calss="qqq">
    御剑乘风来,除魔天地间!===dia
    <router-view></router-view>
    <!-- <button @click="flag=!flag">按钮==app</button> -->
    <hr />
    <!-- <SlotTable :list="list" v-if="flag"> -->
    <SlotTable :list="list">
      <!-- <template #look="{row}"> -->
      <!-- <template v-slot:look="{row}"> -->
      <template slot="look" slot-scope="{ row}">
        <!-- {{ row}} -->
        <button @click="lookHandle(row)">编辑</button>
        <button @click="del(row.id)">删除</button>
      </template>
    </SlotTable>

    <!-- <SlotTable :list="list2">
      <template #look="{row}">
        {{ row.id}}
        <button @click="del2(row.id)">删除</button>
      </template>
    </SlotTable>-->

    <!-- 对话框组件
    1、封装对话框显示和隐藏
    2、优化对话框、结构和布局
    -->
    <Dialog :showFlag.sync="showFlag" title="编辑数据" v-outside="handle">
      <form>
        <div>
          姓名:
          <input type="text" v-model="formData.name" />
        </div>
        <div>
          年龄:
          <input type="text" v-model="formData.age" />
        </div>
      </form>
      <div>
        <button @click="cancel">取消</button>
        <button @click="submit">确认</button>
      </div>
    </Dialog>
  </div>
</template>
<script>
import SlotTable from './slot-Table/SlotTable.vue'
import Dialog from './slot-Table/Dialog.vue'
import vClickOutside from 'v-click-outside';
export default {
  name: '',
  components: {
    SlotTable,
    Dialog
  },
  data () {
    return {
      flag: true,
      showFlag: false,
      formData: {
        name: '',
        age: ''
      },
      list: [
        {
          id: 1,
          name: '赵小云',
          age: 19
        },
        {
          id: 2,
          name: '张小花',
          age: 29
        },
        {
          id: 3,
          name: '孙大明',
          age: 39
        }
      ],
      list2: [
        {
          id: 1,
          name: '赵小云',
          age: 19
        },
        {
          id: 2,
          name: '张小花',
          age: 29
        },
        {
          id: 3,
          name: '孙大明',
          age: 39
        }
      ]
    }
  },

  // beforeCreate () {
  //   console.log('beforeCreate===父');
  // },
  // created () {
  //   console.log('created===父');
  // },
  // beforeMount () {
  //   console.log('beforeMount===父');
  // },
  // mounted () {
  //   console.log('mounted===父');
  // },
  // beforeUpdate () {
  //   console.log('beforeUpdate===父');
  // },
  // updated () {
  //   console.log('updated===父');
  // },
  // beforeDestroy () {
  //   console.log('beforeDestroy===父');
  // },
  // destroyed () {
  //   console.log('destroyed===父');
  // },
  directives: {
    'outside': vClickOutside.directive
  },

  computed: {
  },
  methods: {
    handle () {
      this.showFlag = false
    },
    del (id) {
      console.log(id);
      this.list = this.list.filter(item => item.id != id)
    },
    del2 (id) {
      this.list2 = this.list2.filter(item => item.id != id)
    },
    /* 点击显示对话框 */
    lookHandle (row) {
      this.showFlag = true
      // console.log(row, 9999);
      this.formData = JSON.parse(JSON.stringify(row))//深拷贝
    },
    cancel () {
      // this.$emit('update:showFlag', false)
      this.showFlag = false
    },
    submit () {
      /* 点击确认
        1、更新数据
        2、关闭对话框
        3、清空表单
      */
      // console.log(this.formData);
      //  1、更新数据
      var obj = this.list.find(item => item.id == this.formData.id)
      console.log(obj, 9999);
      obj.name = this.formData.name
      obj.age = this.formData.age
      /* 2/关闭对话框 */
      this.showFlag = false
      // 3、清空表单
      this.formData = {
        name: '',
        age: ''
      }
    }
  }
}
</script>
<style lang='less'  scoped>
</style>